<template>
  <XcDrawer ref="drawer" :title="$t('page.app.nodes')+' - '+appname" :width="1200" :closable="true" :closeconfirm="false">
    <Button type="primary" icon="md-add" @click="onNodeAdd">{{$t('button.add')}}{{$t('page.app.nodeform.title')}}</Button>
    <Divider />
    <Table :columns="columns" :data="node.list" :loading="node.loading" border>
      <template slot-scope="{ row }" slot="status">
        <StatusBadge :content="row.status[0]" :badge="row.status[1]" :statuschangable="false"></StatusBadge>
      </template>
      <template slot-scope="{ row }" slot="host">
        {{row.host+((row.port===80)?'':(':'+row.port))}}
      </template>
      <!-- 提供服务者 -->
      <template slot-scope="{ row }" slot="serverable">
        <span v-if="!row.serverable">-</span>
        <StatusBadge v-else :content="$t(row.serviceStatus[1])+ '(' + $t('page.app.nodetb.weight') + ': ' + row.weight + ')'" :badge="row.serviceStatus[0]" :status="row.serviceStatus[2]" @onChanged="onStatusChanged(row, 1)" />
      </template>
      <!-- 发现服务者 -->
      <template slot-scope="{ row }" slot="discoverable">
        <span v-if="!row.discoverable">-</span>
        <StatusBadge v-else :content="$t(row.discoverStatus[1])" :badge="row.discoverStatus[0]" :status="row.discoverStatus[2]" :statuschangable="false">
          {{row.discovers}}
        </StatusBadge>
      </template>
      <!-- 任务执行器 -->
      <template slot-scope="{ row }" slot="taskable">
        <span v-if="!row.taskable">-</span>
        <StatusBadge v-else :content="$t(row.taskStatus[1])" :badge="row.taskStatus[0]" :status="row.taskStatus[2]" @onChanged="onStatusChanged(row, 2)">
          {{row.tasks}}
        </StatusBadge>
      </template>
      <template slot-scope="{ row }" slot="action">
        <Dropdown :transfer="true">
          <a href="javascript:void(0)">{{$t('button.action')}}<Icon type="ios-arrow-down"></Icon></a>
          <DropdownMenu slot="list">
            <DropdownItem><a @click="latestStat(row)">{{$t('page.app.stat.title')}}</a></DropdownItem>
            <DropdownItem v-if="!row.manual"><a @click="nodeConfig(row)">{{$t('page.app.nodeconf.title')}}</a></DropdownItem>
            <DropdownItem v-if="!row.manual"><a @click="nodeLogger(row)">{{$t('page.app.nodelogger.title')}}</a></DropdownItem>
            <DropdownItem v-if="row.serverable"><a @click="nodeWeight(row)">{{$t('page.app.weight.title')}}</a></DropdownItem>
            <DropdownItem v-if="row.manual"><a @click="nodeSync(row)">{{$t('button.sync')}}</a></DropdownItem>
            <DropdownItem v-if="row.manual"><a class="alert" @click="nodeDel(row)">{{$t('button.delete')}}</a></DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </template>
    </Table>
    <NodeAdd ref="nodeadd" v-if="addRendered" @onRefresh="loadNodes" />
    <NodeStat ref="nodestat" v-if="statRendered" />
    <NodeConfig ref="nodeconfig" v-if="configRendered" />
    <NodeLogger ref="nodelogger" v-if="loggerRendered" />
  </XcDrawer>
</template>

<script>
  import XcDrawer from '@/components/xcdrawer'
  import StatusBadge from '@/components/statusbadge'
  import NodeAdd from './nodeadd'
  import NodeStat from './nodestat'
  import NodeConfig from './nodeconfig'
  import NodeLogger from './nodelogger'
  export default {
    name: "comp-nodeview",
    components: { XcDrawer, StatusBadge, NodeAdd, NodeStat, NodeConfig, NodeLogger },
    data() {
      return {
        appname: String,
        columns: [
          { title: '', slot: 'status', width: 48, align: 'center' },
          { renderHeader: (h, col) => { return h('span', this.$t('page.app.nodetb.host')) }, slot: 'host' },
          { renderHeader: (h, col) => { return h('span', this.$t('page.app.nodetb.group')) }, key: 'group', ellipsis: true },
          { renderHeader: (h, col) => { return h('span', this.$t('page.app.nodetb.serverable')) }, slot: 'serverable', width: 100, align: 'center' },
          { renderHeader: (h, col) => { return h('span', this.$t('page.app.nodetb.discoverable')) }, slot: 'discoverable', width: 100, align: 'center' },
          { renderHeader: (h, col) => { return h('span', this.$t('page.app.nodetb.taskable')) }, slot: 'taskable', width: 100, align: 'center' },
          { title: '', slot: 'action', width: 120, align: 'center' }
        ],
        node: {
          loading: true,
          list: [],
        },
        addRendered: false,
        statRendered: false,
        configRendered: false,
        loggerRendered: false,
      }
    },
    methods: {
      show(name) {
        this.appname = name
        this.$refs.drawer.show()
        this.loadNodes()
      },
      loadNodes() {
        if (!this.appname) return
        this.node.loading = true
        this.$md.dispatch('app_node_list', { data: this.appname }).then(data => {
          if (data.retCode === 1) {
            let nodes = data.data || []
            let node
            for (let i in nodes) {
              node = nodes[i]
              if (node.serverable) node.serviceStatus = this.$util.nodeStatus(!node.online || node.serviceStatus)
              if (node.discoverable) node.discoverStatus = this.$util.nodeStatus(!node.online || node.discoverStatus)
              if (node.taskable) node.taskStatus = this.$util.nodeStatus(!node.online || node.taskStatus)
              node.status = node.online ? [this.$t('online'), 'processing'] : [this.$t('offline'), 'default']
            }
            this.node.list = nodes
          }
          this.node.loading = false
        })
      },
      onStatusChanged(node, type) {
        if (node.online) {
          this.$md.dispatch('app_node_status', {
            appname: node.appname,
            nodeId: node.nodeId,
            type: type,
          }).then(data => {
            if (data.retCode === 1) {
              this.$Message.success(this.$t('submitok'))
              this.loadNodes()
            }
          })
        } else {
          this.$Message.warning(this.$t('page.app.changestatus.onlineneed'))
        }
      },
      onNodeAdd() {
        this.addRendered = true
        this.$nextTick(() => {
          this.$refs.nodeadd.show(this.appname)
        })
      },
      latestStat(node) {
        this.statRendered = true
        this.$nextTick(() => {
          node.appname = this.appname
          this.$refs.nodestat.show(node)
        })
      },
      nodeSync(node) {
        if (!node.manual) return
        this.$md.dispatch('app_node_sync', {
          data: {
            appname: this.appname,
            nodeId: node.nodeId,
          }
        }).then(data => {
          if (data.retCode === 1) {
            this.$Message.success(this.$t('submitok'))
            this.loadNodes()
          }
        })
      },
      nodeDel(node) {
        let that = this
        that.$Modal.confirm({
          title: that.$t('delmodel.title'),
          content: that.$t('delmodel.content'),
          onOk() {
            if (!node.manual) return
            that.$md.dispatch('app_node_del', {
              data: {
                appname: node.appname,
                nodeId: node.nodeId,
              }
            }).then(data => {
              if (data.retCode === 1) {
                that.$Message.success(that.$t('submitok'))
                that.loadNodes()
              }
            })
          }
        })
      },
      nodeConfig(node) {
        this.configRendered = true
        this.$nextTick(() => {
          this.$refs.nodeconfig.show(node)
        })
      },
      nodeWeight(node) {
        let that = this
        let nweight = 0
        that.$Modal.confirm({
          render: (h) => {
            return h('div', [
              h('InputNumber', {
                props: { value: node.weight, min: 1, },
                on: { 'on-change': (val) => { nweight = val } }
              }),
              h('span', { class: ['ml-5'] }, that.$t('page.app.nodeform.weight'))
            ])
          },
          onOk() {
            if (nweight > 0 && nweight !== node.weight) {
              that.$md.dispatch('app_node_weight', {
                data: {
                  appname: node.appname,
                  nodeId: node.nodeId,
                  weight: nweight
                }
              }).then(data => {
                if (data.retCode === 1) {
                  that.$Message.success(that.$t('submitok'))
                  that.loadNodes()
                }
              })

            }
          }
        })
      },
      nodeLogger(node) {
        this.loggerRendered = true
        this.$nextTick(() => {
          this.$refs.nodelogger.show(node)
        })
      }
    }
  }
</script>
